<template>
	<view class="refund-page">
		<view class="box-bg">
			<uni-nav-bar backgroundColor="#fff" shadow left-icon="left" title="安全支付" :border='false' :shadow='false'
				@clickLeft="goBack" />
		</view>
		<view class="refund-item-box">
			<view class="refund-item">
				<text class="refund-title">故宫博物馆学生票</text>
				<view class="refund-quantity">
					<text>商品份数：</text>
					<text class="max-refund">最多可退2份</text>
					<view class="quantity-control">
						<uni-number-box @change="changeValue" :min="1" :max="2" />
					</view>
				</view>
			</view>
			<view class="refund-item">
				<text class="refund-title">景区意外险（含新冠保障）</text>
				<view class="refund-quantity">
					<text>商品份数：</text>
					<text class="max-refund">最多可退2份</text>
					<view class="quantity-control">
						<uni-number-box @change="changeValue" :min="1" :max="2" />
					</view>

				</view>
			</view>
			<view class="refund-amount-box">
				<view class="refund-amount">
					<view class="">
						<text>预估可退金额</text>
						<text class="refund-price"> &emsp;¥ <text class="refundPrice">{{ refundPrice }}</text></text>
					</view>
					<view class="detail" @click="goDetails()">
						明细&nbsp;<uni-icons type="right" size="15"></uni-icons>
					</view>
				</view>
				<view class="refund-amount-title">
					<view class="">
						门票与意外险退订数是必须一致
					</view>
					<view class="">
						退款预计1-7个工作日退回您的支付账户
					</view>

				</view>

			</view>

		</view>

		<view class="refund-reason">
			<view class="refund-reason-title">请选择退订原因(必填)</view>
			<uni-list>
				<uni-list-item v-for="(item,index) in refundReasons">
					<template v-slot:header>
						<view class="slot-box">
							{{item}}
						</view>
					</template>
					<template v-slot:footer>
<<<<<<< HEAD
						<radio v-model="reason" />
=======
						<!-- <radio :value="item" v-model="reason" /> -->
>>>>>>> 4725f223a51f2bb22969abba482c4275b3a9916b
					</template>
				</uni-list-item>

			</uni-list>
		</view>
		<view class="refund-submit-box">
			<button class="refund-submit" @click="submitRefund">申请退订</button>
		</view>

	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	const reason = ref("")
	const refundPrice = ref(60)
	const studentTicketQuantity = ref(2);
	const refundReasons = [
		'需要改出行日期',
		'信息填错重新买',
		'证件未带/带错',
		'景区关闭',
		'商家主动联系要求退订',
		'未收到入园凭证',
		'取票不方便',
		'计划有变不去了',
		'其他原因'
	];
	const selectedReason = ref(null);


	function submitRefund() {
		if (selectedReason.value === null) {
			uni.showToast({
				title: '请选择退订原因',
				icon: 'none'
			});
			return;
		}
		// 提交退订逻辑
		console.log(
			`提交退订: ${studentTicketQuantity.value}张学生票, ${insuranceQuantity.value}份保险, 原因: ${refundReasons[selectedReason.value]}`
		);
		uni.showToast({
			title: '退订申请已提交',
			icon: 'success'
		});
	}

	function goDetails() {
		uni.navigateTo({
			url: '/pages/entrance-ticket/details/details'
		});
	}

	function radioChange() {
		console.log(reason);
	}
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style>
	.refund-page {
		background-color: #f5f5f5;
	}

	.refund-item-box {
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.refund-item {
		width: 85%;
		/* background-color: #eee; */
		padding: 16px;
		margin-top: 16px;
		border-radius: 8px;
		box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 22%);
	}

	.refund-title {
		font-size: 35rpx;
	}

	.refund-quantity {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 8px;
	}

	.quantity-control {
		display: flex;
		align-items: center;
	}

	.max-refund {
		color: orange;
		font-size: 25rpx;
	}

	.refund-price {
		color: #ff0000;
		text-align: right;
		font-size: 35rpx;
	}

	.detail {
		font-size: 30rpx;
		color: #007aff;
	}


	button {
		width: 30px;
		height: 30px;
		margin: 0 5px;
	}

	input {
		width: 40px;
		text-align: center;
		margin: 0 5px;
	}

	.refund-amount-box {
		width: 95%;
	}

	.refund-amount {
		padding: 30rpx 0;
		font-size: 30rpx;
		/* color: #e83e3e; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.refund-reason {
		margin-top: 30rpx;
		background-color: #fff;
		padding-bottom: 200rpx;
	}

	.refund-reason-title {
		color: #ccc;
		padding: 30rpx;
	}

	.refund-submit {
		width: 85%;
		height: 90rpx;
		border-radius: 20rpx;
		border: none;
		color: #fff;
		background-color: #e23940;
	}

	.refund-submit-box {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		position: fixed;
		bottom: 0;
	}

	.refund-amount-title {
		font-size: 20rpx;
		color: #ccc;
		margin-bottom: 25rpx;
	}
</style>